<template>
  <div>
    <a-modal v-model="visible" centered :title="false" :footer="null" width="60vw" @cancel="close">
      <div class="info">
        <div class="img">
          <img :src="proInfo.skus[0].imgurl" alt="" v-if="proInfo.skus.length > 0 && proInfo.skus[0].imgurl !== ''" />
          <img src="https://img.bzhz.jnbygroup.com/cloth.png" alt="" v-else />
        </div>
        <div class="content">
          <a-descriptions :column="1">
            <a-descriptions-item label="款号">
              {{ proInfo.name }}
            </a-descriptions-item>
            <a-descriptions-item label="品名">
              {{ proInfo.value }}
            </a-descriptions-item>
            <a-descriptions-item label="品牌">
              {{ proInfo.brand }}
            </a-descriptions-item>
            <a-descriptions-item label="年份">
              {{ proInfo.year }}
            </a-descriptions-item>
            <a-descriptions-item label="吊牌价">
              <span class="red">¥ {{ proInfo.price }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="颜色">
              <span v-if="proInfo.skus.length > 0">{{ proInfo.skus[0].colorno }}</span>
              <span v-else>--</span> / <span v-if="proInfo.skus.length > 0">{{ proInfo.skus[0].color_name }}</span>
              <span v-else>--</span>
            </a-descriptions-item>
            <a-descriptions-item label="小季节">
              {{ proInfo.small_season }}
            </a-descriptions-item>
            <a-descriptions-item label="大季节">
              {{ proInfo.big_season }}
            </a-descriptions-item>
            <a-descriptions-item label="款式成分">
              {{ proInfo.mark_style }}
            </a-descriptions-item>
            <a-descriptions-item label="波段">
              {{ proInfo.m_band }}
            </a-descriptions-item>
            <a-descriptions-item label="大类">
              <span>{{ proInfo.m_big_category }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="小类">
              <span>{{ proInfo.m_small_category }}</span>
            </a-descriptions-item>
            <!-- <a-descriptions-item label="主题">
            </a-descriptions-item> -->
            <a-descriptions-item label="成分面料">
              <span v-if="proInfo.mark_style">{{ proInfo.mark_style }}</span>
              <span v-else>--</span>
            </a-descriptions-item>
            <!-- <a-descriptions-item label="条码ID">
            </a-descriptions-item>
            <a-descriptions-item label="条码">
            </a-descriptions-item>
            <a-descriptions-item label="国际码">
            </a-descriptions-item>
            <a-descriptions-item label="风格标签">
            </a-descriptions-item> -->
            <a-descriptions-item label="图片地址">
              <span v-if="proInfo.skus.length > 0 && proInfo.skus[0].imgurl !== ''">{{ proInfo.skus[0].imgurl }}</span>
              <span v-else>--</span>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: {
    infoVisible: {
      type: Boolean,
      default: false
    },
    proInfo: {
      type: Object,
      default: null
    },
    infoType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      type: ''
    }
  },
  watch: {
    infoVisible(value, oldvalue) {
      this.visible = value
    },
    infoType(value, oldvalue) {
      this.type = value
    }
  },
  methods: {
    close() {
      this.visible = false
      this.type = ''
      this.$emit('closeInfo', false)
    }
  }
}
</script>
<style lang="less" scoped>
.info {
  display: flex;
  .img {
    width: 50%;
    img {
      display: block;
      width: 100%;
      height: 60vh;
      object-fit: scale-down;
    }
  }
  .content {
    width: 50%;
    padding-top: 24px;
    padding-left: 24px;
    box-sizing: border-box;
    .red {
      color: #f45555;
    }
  }
}
</style>

